<!-- 整个项目的根组件/主组件 -->
<template>
  <div id="app">
    <nav>
      <!-- <router-link to="/login" exact-active-class="mui-btn mui-btn-royal" tag="button" class="shift-a">登录</router-link> _ -->
      <router-link to="/login" exact-active-class="my_active" tag="button" class="shift-a">登录</router-link> _
      <!-- <router-link to="/register" exact-active-class="mui-btn mui-btn-royal" tag="button" class="shift-a">注册</router-link> -->
      <router-link to="/register" exact-active-class="my_active" tag="button" class="shift-a">注册</router-link>
    </nav>
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}

.my_active, .my_exact_active {
  width: 100px;
  height: 40px;
  color: #fff;
  background-color: purple;
}

.shift-a {
  width: 100px;
    height: 40px;
  /* background: none; */
  border: none;
}


</style>
